@each $item in center,
left,
right {
  .text-#{$item} {
    text-align: $item;
  }
}

@for $i from 0 through 50 {
  .mx#{$i * 2} {
    margin-right: (2px * $i) !important;
    margin-left: (2px * $i) !important;
  }

  .my#{$i * 2} {
    margin-top: (2px * $i) !important;
    margin-bottom: (2px * $i) !important;
  }

  .mt#{$i * 2} {
    margin-top: (2px * $i) !important;
  }

  .mr#{$i * 2} {
    margin-right: (2px * $i) !important;
  }

  .mb#{$i * 2} {
    margin-bottom: (2px * $i) !important;
  }

  .ml#{$i * 2} {
    margin-left: (2px * $i) !important;
  }
}

@for $i from 0 through 20 {
  .px#{$i * 2} {
    padding-right: (2px * $i) !important;
    padding-left: (2px * $i) !important;
  }

  .py#{$i * 2} {
    padding-top: (2px * $i) !important;
    padding-bottom: (2px * $i) !important;
  }

  .pt#{$i * 2} {
    padding-top: (2px * $i) !important;
  }

  .pr#{$i * 2} {
    padding-right: (2px * $i) !important;
  }

  .pb#{$i * 2} {
    padding-bottom: (2px * $i) !important;
  }

  .pl#{$i * 2} {
    padding-left: (2px * $i) !important;
  }
}

.map-circle {
  position: absolute;
  height: 116px;
  width: 116px;
  border-radius: 50%;
  font-size: 13px;
  text-align: center;
  color: #fff;
  background: #EF696B;

  // border: 1px solid #eb4446;
  &:hover {
    background: #f5a1a2;
    color: #fff;
    z-index: 10000;
  }
}

.map-ellipse {
  display: flex;
  justify-content: space-between;
  position: absolute;
  height: 33px;
  min-width: 150px;
  border-radius: 20px;
  font-size: 13px;
  text-align: center;
  color: #fff;
  background: #EF696B;
  // border: 1px solid #eb4446;
  line-height: 32px;
  padding: 0 6px 0 10px;

  &:hover {
    background: #f5a1a2;
    color: #fff;
    z-index: 10000;
  }
}

.map-title {
  display: inline-block;
  max-width: 64px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  vertical-align: middle;
}

.map-text {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 65px;
}

.map-staText {
  margin: 0;
  padding: 0;
  // color: #f4f4f4;
}

.map-num {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 32px;
  height: 23px;
  line-height: 23px;
  background-color: #fff;
  color: #EF696B;
  border-radius: 16px;
  margin-top: 5px;
}

.searchPanel {
  .el-button:hover {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
  }

  .el-button--danger:hover {
    background: #f78989;
    border-color: #f78989;
    color: #fff;
  }
}

.distAlign {
  display: flex;
  justify-content: space-between;
}

.infoWindow {
  font-size: 14px;
  line-height: 10px;

  .infoWindowGroundImg {
    display: inline-block;
    width: 400px;
    height: (400px * 9) / 16;
    vertical-align: middle;
    margin: auto;
  }
}

.BMap_bubble_pop {
  width: 400px !important;
  height: 310px !important;
  padding: 6px 10px !important;

  // top: 157px !important;
  img {
    top: 322px !important;
  }

  .BMap_bubble_center {
    width: 400px !important;
    height: 284px !important;
  }

  .oneline {
    display: inline-block;
    margin: 0;
    width: 380px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .BMap_bubble_top {
    height: 26px !important;

    .BMap_bubble_title {
      height: 26px !important;
      line-height: 26px !important;
      width: 380px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .BMap_bubble_buttons {
      height: 26px !important;
      top: 0 !important;

      div:nth-child(2) {
        div {
          font-size: 27px !important;
        }
      }
    }
  }

  .BMap_bubble_content {
    width: 400px !important;
  }
}

.tel {
  height: 28px;
  line-height: 28px;
  margin: 0;
  padding: 0;

  .tel1 {
    display: inline-block;
    width: 328px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .detailBtn {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #eb4446;
    font-size: 15px;

    &:hover {
      cursor: pointer;
    }

    .moreImg {
      display: inline-block;
      width: 17px;
      height: 17px;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
}

.swipeImg {

  .scale,
  .el-carousel__container {
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    // position: relative;

    .imgDiv {
      width: 100%;
      height: 100%;
      position: absolute;
    }
  }
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  // display: none;
}

::-webkit-scrollbar-track {

  background: #fff;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {

  background: rgb(205, 206, 206);

  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {

  background: #979797;
}

::-webkit-scrollbar-corner {

  background: #fff;
}

.detail {
  .el-timeline-item__icon {
    font-size: 20px;
  }

  .el-timeline-item__node--normal {
    width: 32px;
    height: 32px;
  }

  .el-timeline-item__wrapper {
    padding-left: 52px;
  }

  .el-timeline-item {
    padding-bottom: 60px;
  }

  .el-timeline-item__tail {
    left: 15px
  }

  .el-timeline-item__timestamp {
    font-size: 16px;
    font-weight: bolder;
    color: #000000;
  }

  .el-timeline-item__content {
    text-indent: 2em;
    line-height: 30px;
    color: #909399
  }
}
